<template>
  <!--  MyCollection-->
  <div style="text-align: left;">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">录播课程</el-menu-item>
    </el-menu>
    <el-row v-for="item in aaaa" :key="item.id"
            style="border-bottom: #cccccc solid 1px;padding-top: 10px;padding-bottom: 10px" type="flex" justify="start">
      <el-col :span="20" class="course_content">
        <div style="display: inline-block; float: left; margin: 5px;">
          <img :src="item.courseImage" class="avatar">
        </div>
        <div style="display: inline-block; float: left">
          <div style="margin-left: 10px;">
            <p class="course_name">{{ item.courseName }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="bg-purple">
          <el-button type="info" plain @click="accessStudy(item.scId,item.kid)">进入学习</el-button>
          <br>
          <el-button type="text" @click="handleCancel(item.scId)">取消收藏</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import  qs from "qs";
export default {
  name: "MyCollection",
  data() {
    return {
      deleteByIdS:{
        scId:'',
      },
      aaaa: [],
      activeIndex: '1',
      courseImage: 'http://meltange.oss-cn-beijing.aliyuncs.com/aaa/123.jpg'
    }
  },
  created() {
    this.findAll();
  },
  methods: {
    accessStudy(id,kid){
      //传主键到课程播放页面
      this.$router.push({
        //路径名
        path: '/MyCollection',
        query: {
          id:id,
          kid:kid,
          //alert(JSON.stringify()+"SSS")

          /*
          this.$route.query.id
          通过这个接收
          */
        }
      })
    },
    findAll(){
      this.$axios.post("leadingEnd-curriculum/ronco/course-collection/findAll").then(r => {
        this.aaaa=r.data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
handleCancel(a) {
      this.$confirm('此操作将永久取消该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(r => {
        this.deleteById(this.deleteByIdS.scId=a);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteById(a){
      this.$axios.post("leadingEnd-curriculum/ronco/course-collection/deleteById",qs.stringify(this.deleteByIdS)).then(r => {
        if (r.data==true){
          this.findAll();
          this.$message({
            type: 'success',
            message: '取消成功!'
          });
        }else {
          this.$message({
            type: 'info',
            message: '取消失败'
          });
        }
      })
    }
  }
}
</script>

<style scoped>
.avatar {
  width: 180px;
  height: 100px;
  display: block;
  margin-left: 10px;
}

.course_content p {
  height: 40px;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 20px;
}

.course_name {
  font-size: 16px;
  left: 205px;
  color: #999;
}

.el-row--flex {
  margin-bottom: 0;
}
</style>
